import React, { useState, useRef } from 'react';
import { View, Text, StyleSheet, ScrollView, Button, TouchableOpacity, ActivityIndicator } from 'react-native';
import WebView from 'react-native-webview';

const WebViewTestSourceBody = () => {
  const [responseData, setResponseData] = useState('');
  const [loading, setLoading] = useState(false);
  const [requestSent, setRequestSent] = useState(false);
  const webViewRef = useRef(null);

  const testPostRequest = () => {
    if (loading) return;
    setLoading(true);
    setRequestSent(true);
    setResponseData('正在发送POST请求...');
    if (webViewRef.current) {
      webViewRef.current.reload();
    }
  };

  const resetTest = () => {
    setRequestSent(false);
    setResponseData('');
    setLoading(false);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>WebView POST请求测试</Text>
      
      <View style={styles.webviewContainer}>
        {requestSent ? (
          <WebView
            ref={webViewRef}
            source={{
              uri: 'http://10.10.57.139:3000/test-post',  // 需要更改为服务器的ip地址
              method: 'POST',
              body: `username=testuser&message=这是一个测试POST请求`
            }}
            javaScriptEnabled={true}
            onLoadStart={() => setLoading(true)}
            onLoadEnd={() => setLoading(false)}
            onMessage={(event) => {
              setResponseData(event.nativeEvent.data);
            }}
            onError={(syntheticEvent) => {
              const { nativeEvent } = syntheticEvent;
              setResponseData(`WebView错误: ${nativeEvent.description}`);
              setLoading(false);
            }}
          />
        ) : (
          <View style={styles.placeholder}>
            <Text style={styles.placeholderText}>点击"发送POST请求"按钮开始测试</Text>
          </View>
        )}
      </View>
      
      <View style={styles.controls}>
        <TouchableOpacity
          style={[styles.button, loading && styles.buttonDisabled]}
          onPress={testPostRequest}
          disabled={loading}
        >
          <Text style={styles.buttonText}>
            {loading ? '发送中...' : '发送POST请求'}
          </Text>
          {loading && <ActivityIndicator size="small" color="#fff" style={styles.loader} />}
        </TouchableOpacity>
        
        {requestSent && (
          <TouchableOpacity
            style={[styles.button, styles.resetButton]}
            onPress={resetTest}
            disabled={loading}
          >
            <Text style={styles.buttonText}>重置测试</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 15,
    textAlign: 'center',
    color: '#333',
  },
  webviewContainer: {
    height: 300,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    marginBottom: 15,
    overflow: 'hidden',
  },
  placeholder: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  placeholderText: {
    color: '#666',
    fontSize: 16,
  },
  controls: {
    marginBottom: 15,
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 5,
    flexDirection: 'row',
    alignItems: 'center',
    minWidth: 140,
    justifyContent: 'center',
  },
  buttonDisabled: {
    backgroundColor: '#ccc',
  },
  resetButton: {
    backgroundColor: '#FF3B30',
  },
  buttonText: {
    color: '#fff',
    fontWeight: 'bold',
    marginRight: 5,
  },
  loader: {
    marginLeft: 5,
  },
});

export default WebViewTestSourceBody;